{extend name="base" /}
{block name="css"}
<link rel="stylesheet" href="/static/layuiadmin/layui/css/layui.css" media="all">
<link rel="stylesheet" href="/static/layuiadmin/style/admin.css" media="all">
{/block}
{block name="body"}
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-sm6 layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header">
                    收入金额
                    <span class="layui-badge layui-bg-blue layuiadmin-badge">本月</span>
                </div>
                <div class="layui-card-body layuiadmin-card-list">
                    <p class="layuiadmin-big-font"> {$data.mshouru}</p>
                </div>
            </div>
        </div>
        <div class="layui-col-sm6 layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header">
                    支出金额
                    <span class="layui-badge layui-bg-cyan layuiadmin-badge">本月</span>
                </div>
                <div class="layui-card-body layuiadmin-card-list">
                    <p class="layuiadmin-big-font">{$data.mzhichu}</p>
                </div>
            </div>
        </div>
        <div class="layui-col-sm6 layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header">
                    收入金额
                    <span class="layui-badge layui-bg-green layuiadmin-badge">今年</span>
                </div>
                <div class="layui-card-body layuiadmin-card-list">
                    <p class="layuiadmin-big-font">{$data.yshouru}</p>
                </div>
            </div>
        </div>
        <div class="layui-col-sm6 layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header">
                    支出金额
                    <span class="layui-badge layui-bg-orange layuiadmin-badge">今年</span>
                </div>
                <div class="layui-card-body layuiadmin-card-list">
                    <p class="layuiadmin-big-font">{$data.yzhichu}</p>
                </div>
            </div>
        </div>
        <!---
        <div class="layui-col-md12">
            <div class="layui-row layui-col-space15">
                <div class="layui-card-header">近30日现金报表</div>
                <div class="layui-card">
                    <table class="layui-table layui-form" lay-filter="demo">
                        <thead>
                            <tr>
                                <th>日期</th>
                                {foreach name="array" item="r"}
                                <th>{$r}日</th>
                                {/foreach}
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>数量</td>
                                {foreach name="dingdan" item="r"}
                                <td>{$r}</td>
                                {/foreach}
                            </tr>
                            <tr>
                                <td>金额</td>
                                {foreach name="money" item="r"}
                                <td>￥{:number_format($r,2)}元</td>
                                {/foreach}
                            </tr>
                        </tbody>

                    </table>
                </div>
            </div>
            
        </div-->
        <div class="layui-col-sm12">
            <div class="layui-row layui-col-space15">
                <!--订单金额分析-->
                <div class="layui-col-sm12">
                    <div class="layui-card">
                        <div class="layui-card-header">近30日现金图表</div>
                        <div class="layui-card-body">
                            <div class="layui-row layui-col-space15">
                                <div id="container" style="height: 500px;"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{/block}
{block name="js"}
<script src="/static/layuiadmin/layui/layui.js?t=1"></script>  
<script>
    layui.config({
        base: '/static/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'console']);
</script>
<script src="/static/js/echarts.common.min.js"></script>
<script type="text/javascript">
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;
    option = {
        title: {
            left: 'center'
        },
        tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        xAxis: {
            type: 'category',
            name: '日期',
            splitLine: {show: true},
            data: [
            <?php foreach ($array as $r) {?>
                '{$r}日',
            <?php }?>]
        },
        yAxis: {
            type: 'value'
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        series: [
            {
                name: '金额',
                data: [<?php foreach ($money as $r) {?>
                        {$r},
                        <?php }?>],
                type: 'line',
                label:{
                    normal:{
                        show:true,
                        position:'top',
                        textStyle: {
                            color: '#000',
                            fontSize: 16
                        }
                    }
                }
            },
            {
                name: '数量',
                data: [<?php foreach ($dingdan as $r) {?>
                        {$r},
                        <?php }?>],
                type: 'line',
                label:{
                    normal:{
                        show:true,
                        position:'top',
                        textStyle: {
                            color: '#0a93fb',
                            fontSize: 16
                        }
                    }
                }
            }
        ]
    };
    ;
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
</script>
{/block}